<template>
    <div id="mayDay">
        <div class="title">
            <div class="title_top">
                <span @click="getAlert()">规则>></span>
            </div>
            <div class="title_bottom">
                <p>活动日期：{{time}}</p>
                <p><span v-if="activitys.on">任务每日刷新，要及时完成哦！</span><router-link class="record-btn" to="mayDayRecord">奖励领取记录>></router-link></p>
            </div>
        </div>
        <ul class="table_calls" :class="{backgOn:!activitys.on}">
            <li v-if="!activitys.on" class="notOpen">活动未开启敬请期待！</li>
            <li v-else class="table_call" v-for="activity in activitys.task" :key="activity.id">
                <div class="call_hd">
                    <h3>{{activity.task_desc}}</h3>
                    <p>进度{{activity.config_count||0}}/{{activity.task_goal}}</p>
                </div>
                    <div class="call_bd">
                    <h3>奖励：房卡*{{activity.reward_goal}}</h3>
                    <x-button class="unfinish-btn" v-if="parseInt(activity.schedule)!=100" type="primary" disabled :mini="true">未完成</x-button>
                    <x-button class="succeed-btn"  v-else-if="activity.reward_status===1" type="primary" disabled :mini="true">已领取</x-button>
                    <x-button class="finish-btn"   v-else type="primary" @click.native="getreward(activity.task_id,activity.id)"  :mini="true">领 取</x-button>
                </div>
            </li>
        </ul>
        <tab class="tab_box" :line-width=0>
            <tab-item class="vux-center vux-1px-r" :selected="selected  === tab" v-for="(tab, index) in tablist" @click.native="switchTabid(tab)" :key="index">
              {{tab.substr(1).replace(/\./, "月")+'日'}}
            </tab-item>
        </tab>
        <!-- 弹框 -->
        <div class="modal" v-if="modalShow">
          <div @click="closeModal()" class="modal-mask"></div>
          <div class="modal-body">
            <div class="modal__hd flex">
              <p class="left_line"></p>
              <h3 v-if="modaltitle">{{modaltitle}}</h3>
              <h3 v-else>活动规则</h3>
              <p class="right_line"></p>
            </div>
            <div class="modal__bd">
              <p v-if="modalmsg">{{modalmsg}}</p>
              <ul v-else>
                <li>1、活动时间：4月29日0:00-5月1日24：00</li>
                <li>2、活动时间内，代理所创建的所有亲友圈每开一局有效游戏（完成第一局）即增加1局活动局数。</li>
                <li>3、每日亲友圈开局数满足任务条件的局数即可领取对应的房卡，领取后自动充值到代理商后台。</li>
                <li>4、每日活动0：00刷新，活动局数重新累计，过期则不可再完成之前的活动。</li>
                <li>活动最终解释权归{{COMPANY_GAME_NAME}}所有。</li>
              </ul>
            </div>
          </div>
        </div>

    </div>
</template>
<script>
import { Tab, TabItem, XButton, XTable, XProgress, Alert } from "vux";
import { add0 } from "../../../scripts/utils";
export default {
  data() {
    return {
      selected: "", //默认时间
      tablist: [], //底部导航
      activitylist: {}, //任务列表
      activitys: {}, //任务列表
      modalShow: false,
      modaltitle: "", //弹框title
      modalmsg: "", //弹框信息
      time: "" //活动开始结束时间
    };
  },
  components: {
    Tab,
    TabItem,
    XButton,
    XTable,
    XProgress,
    Alert
  },
  created() {
    let date = new Date();
    this.selected = add0(date.getMonth() + 1) + "." + date.getDate();
    this.getMayDayActivity();
  },
  methods: {
    getAlert(title, msg) {
      this.modalShow = true;
      this.modaltitle = title;
      this.modalmsg = msg;
    },
    closeModal() {
      this.modalShow = false;
      this.modaltitle = "";
      this.modalmsg = "";
    },
    getMayDayActivity() {
      this.apiService.Task.clubcounter().then(res => {
        this.time = res.data.time;
        this.tablist = Object.keys(res.data.tasks);
        this.activitylist = res.data.tasks;
        //设置默认时间[五一结束后仍然可以领奖]
        let endtime = this.tablist[this.tablist.length - 1]; //获取最后一天
        if (!this.activitylist.hasOwnProperty(this.selected))
          this.selected = endtime;
        this.activitys = this.activitylist[this.selected];
      });
    },
    switchTabid(type) {
      this.activitys = this.activitylist[type];
    },
    getreward(task_id, config_id) {
      this.apiService.Task.getnontimedtaskreward({
        taskid: task_id,
        configid: config_id
      }).then(res => {
        this.getAlert(res.msg, `恭喜你成功领取房卡${res.data.reward_number}张`);
        this.getMayDayActivity();
      });
    }
  }
};
</script>


<style scoped>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
#mayDay {
  height: 100%;
  overflow: hidden;
}
.tab-swiper {
  background-color: #fff;
  height: 100%;
}
.tab_box {
  position: fixed;
  width: 100%;
  bottom: 0%;
}
/*顶部*/
.title {
  width: 100%;
  height: 25%;
  background: url("../../../images/mayDayTitle.jpg") no-repeat center;
  background-size: 100% 100%;
  background-color: #b73032;
}
.title_top {
  height: 60%;
  position: relative;
}
.title_top h3 {
  font-size: 0.35rem;
  padding: 0.1rem 0.4rem;
}
.title_top span {
  position: absolute;
  top: 0;
  right: -0.2rem;
  display: inline-block;
  color: #fff;
  background-color: #0d8d20;
  border-radius: 0.3rem;
  font-size: 0.25rem;
  line-height: 0.3rem;
  padding: 0.1rem 0.3rem;
  box-shadow: 0px 2px 2px #1a1a1e;
}
.title_bottom p {
  font-size: 0.3rem;
  padding: 0.1rem 0.1rem 0.05rem 0.2rem;
}
.title_bottom p:nth-child(1) {
  text-align: center;
  color: #fff;
}
.title_bottom p:nth-child(2) {
  color: #ffd75e;
  overflow: hidden;
}
.title_bottom p:nth-child(2) a {
  float: right;
  padding: 0 0.1rem 0 0.2rem;
  background-color: rgba(0, 0, 0, 0.3);
  color: #58dd6c;
  border-radius: 0.5rem;
}
/*列表样式*/

.table_calls {
  position: relative;
  overflow: auto;
  height: 70%;
  background-color: #b73032;
  padding-bottom: 44px;
}
.table_call {
  background-color: #fff7e9;
  padding: 0.15rem 0.05rem;
  margin: 0.1rem;
  border-radius: 0.1rem;
}
.table_call .call_hd,
.table_call .call_bd {
  position: relative;
  overflow: hidden;
  padding: 0 0.05rem;
}

.table_call .call_hd h3 {
  float: left;
  line-height: 0.5rem;
  font-size: 0.32rem;
  padding-left: 0.1rem;
}
.table_call .call_hd p {
  float: right;
  font-size: 0.27rem;
  line-height: 0.5rem;
}
.table_call .call_bd h3 {
  float: left;
  font-size: 0.35rem;
  margin-top: 0.2rem;
  line-height: 0.4rem;
  padding: 0 0.15rem;
  border-radius: 0.4rem;
  background-color: #b5140e;
  color: #fff;
}

.table_call .call_bd button {
  float: right;
  line-height: 0.6rem;
}
.table_calls .unfinish-btn,
.table_calls .finish-btn,
.table_calls .succeed-btn {
  font-size: 0.35rem;
  line-height: 0.7rem;
  padding: 0 0.9em;
}
.table_calls .unfinish-btn {
  color: #d59e3a;
  border: 1px solid #d59e3a;
  background-color: #fde9cb;
}
.table_calls .finish-btn {
  padding: 0 1.2em;
}
.table_calls .succeed-btn {
  color: #737374;
  border: 1px solid #d7d7d7;
  background-color: #d7d7d7;
}
.notOpen {
  color: #000;
  font-size: 0.35rem;
  text-align: center;
  padding: 40% 0.2rem;
}
.backgOn {
  background-color: #fff;
}

#mayDay .tab_box:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  border-top: 2px solid #d5d5d6;
  color: #d5d5d6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

/* 弹框样式 */
#mayDay .modal-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
#mayDay .modal-body {
  position: fixed;
  z-index: 5000;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 0.1rem;
  overflow: hidden;
}
#mayDay .modal__hd .left_line {
  background: url("../../../images/tanchu_biao01.png") no-repeat;
  background-position-x: 0.6rem;
}
#mayDay .modal__hd .right_line {
  background: url("../../../images/tanchu_biao02.png") no-repeat;
  background-position-x: -0.6rem;
}
#mayDay .modal .modal__hd p {
  background-size: contain;
  background-position-y: bottom;
  flex: 1;
  height: 0.5rem;
}
#mayDay .modal__hd h3 {
  color: rgb(180, 53, 54);
  font-size: 0.35rem;
  font-weight: 600;
  text-align: center;
  padding: 0.4rem 0.2rem 0.2rem 0.2rem;
}
#mayDay .modal__bd {
  margin: 0.2rem;
  padding: 0.2rem;
  font-size: 0.3rem;
  line-height: 0.5rem;
  word-wrap: break-word;
  word-break: break-all;
  background-color: rgb(253, 246, 234);
}
#mayDay .modal__bd p {
  text-align: center;
}
#mayDay .modal__bd ul li {
  font-size: 0.25rem;
}
</style>
<style>
#mayDay .vux-tab {
  height: auto;
}
#mayDay .progress .weui-progress__bar,
#mayDay .weui-progress__inner-bar {
  height: 0.25rem;
  border-radius: 0.25rem;
}
/*重写底部导航样式*/
#mayDay .vux-center {
  position: relative;
  color: rgb(137, 137, 137);
  background-color: #fff;
  font-weight: 600;
}
#mayDay .vux-1px-r:after {
  content: " ";
  position: absolute;
  right: 0;
  width: 1px;
  height: 60%;
  top: 20%;
  bottom: 0;
  border-right: 1px solid rgb(213, 213, 213);
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
#mayDay .vux-tab-container {
  overflow: initial;
}
#mayDay .vux-tab-selected {
  position: relative;
  color: #000;
  background-color: #fff;
}
</style>
